<template>
	<view class="prize_info">

		<image :src="domain+prize.photo"></image>
		<p class="name">奖品： {{prize.draw_name}}</p>
		<p class="date"> {{prize.endtime|formatDateTime}} 自动开奖</p>

	</view>
</template>
<script>
	export default {
		props: {
			prize: {
				type: Object,
				default: () => ({})
			}
		},
		filters: {
			formatDateTime(dateTimeString) {
				const date = new Date(dateTimeString);

				const month = date.getMonth() + 1;
				const day = date.getDate();
				const hour = date.getHours().toString().padStart(2, '0');
				const minute = date.getMinutes().toString().padStart(2, '0');

				const formattedDateTime = `${month}月${day}日 ${hour}:${minute}`;

				return formattedDateTime;
			}
		},
		data() {
			return {
				src: uni.$http.baseUrl + "/upload/template/photo/yi.png",
				domain: uni.$http.baseUrl + "/"
			}
		},
		mounted() {
			console.log("mounted")
			console.log(this.prize)
		}
	}
</script>
<style lang="scss" scoped>
	.prize_info {
		background-color: #fff;
		padding: 30rpx;
		height: 450rpx;
		margin-bottom: 200rpx;

		image {
			width: 100%;
			height: 300rpx
		}


		.name {
			color: #000;
			font-size: 30rpx;
			font-weight: bold;
			margin: 21rpx 0;
		}

		.date {
			color: #868686;
			font-size: 24rpx;
			padding-bottom: 21rpx;
			border-bottom: 1px solid #ccc;
		}

		.c_868686 {
			color: #868686;
		}

		.footer_btn {
			margin-top: 10rpx;
			padding: 20rpx 0;
			border-top: 1px solid #707070;

			text {
				border: 1px dashed #579EFF;
				padding: 5rpx 10rpx;
				border-radius: 30rpx;
				background-color: #E0F3FF;
			}
		}
	}
</style>